import React from 'react';
import './App.css';
import { Drawer, Badge, Tabs } from 'antd-mobile';
import {Icon} from 'antd'
import {BrowserRouter as Router,Route} from 'react-router-dom'
import routes from './router'
import { StickyContainer, Sticky } from 'react-sticky';
import Slidebar from './components/Slidebar/Slidebar'
//导入Mine组件
import Mine from './components/Mine/Mine'
//导入Find组件
import Find from './components/Find/Find'
//导入Friend组件
import Friend from './components/Friend/Friend'
//导入Video组件
import Video from './components/Video/Video'

const tabs = [
  { title: <Badge dot>我的</Badge>},
  { title: <Badge dot>发现</Badge>},
  { title: <Badge dot>朋友</Badge>},
  { title: <Badge dot>视频</Badge>}
];
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    open: false
    }
  }
  onOpenChange = (...args) => {
    console.log(args);
    this.setState({ open: !this.state.open });
  }
  renderTabBar(props) {
    return (<Sticky>
      {({ style }) => <div style={{ ...style, zIndex: 1 }}><Tabs.DefaultTabBar {...props} /></div>}
    </Sticky>);
  }

  render() {
    return (
      <div>
        {window.location.href==='http://localhost:3000/'||window.location.href==='http://192.168.43.121:3000/'?
          <Drawer
            className="my-drawer"
            style={{ minHeight: document.documentElement.clientHeight }}
            enableDragHandle
            contentStyle={{ color: '#A6A6A6', textAlign: 'center', paddingTop: 42 }}
            sidebar={<Slidebar/>}
            open={this.state.open}
            onOpenChange={this.onOpenChange}
          >
            <header className="header">
              <a href='javascript:;' onClick={this.onOpenChange}><Badge text={'5'}><Icon type="menu" /></Badge></a>
              <a href='/search' onClick={this.onOpenChange}><Icon type='search'/></a>
            </header>
            <StickyContainer style={{minHeight:document.documentElement.clientHeight}}>
              <Tabs tabs={tabs}
                initialPage={1}
                swipeable={false}
                renderTabBar={this.renderTabBar}
                onChange={(tab, index) => { console.log('onChange', index, tab); }}
                onTabClick={(tab, index) => { console.log('onTabClick', index, tab); }}
              >
                <Mine />
                <Find />
                <Friend />
                <Video />
              </Tabs>
            </StickyContainer>
            <footer className='footer'>
              <p>hahaha</p>
            </footer>
          </Drawer>:
          <Router>
            {routes.map((item, index) => {
                return (<Route key={index} path={item.path} component={item.component} />)
            })}
          </Router>}
      </div>);
  }
}
export default App;
